<template>
  <div class="main">
    <div style="width: 100%;height: 30px;display: flex;">
      <div style="width: 250px;margin-left: 0; display: flex"><i class="el-icon-search"
          style="margin-right: 5px;line-height: 40px;"></i><el-input size="medium" placeholder="输入菜品ID搜索"
          v-model="dishID" clearable @clear="query()" /><el-button type="primary" icon="el-icon-search" size="mini"
          round @click="dishIDSearch">搜索</el-button></div>
      <div style="width: 50px;margin-left: 5%; display: flex;">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini"
        circle @click="categoryIdAdd">添加菜品</el-button></div>
    </div>
    <div v-if="userAll">
      <el-table :data="list" v-loading="queryLoading" style="width: 100%;
    height: 76vh;" :default-sort="{ prop: 'date', order: 'descending' }" key="table1">
        <el-table-column type="selection" width="55px" v-if="checkBox">
        </el-table-column>
        <el-table-column label="ID" prop="id" key="id">
          <template slot-scope="scope">
            <span style="">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="菜品名字" prop="name" align="center">
          <template slot-scope="scope">
            <span style="">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="categoryId" sortable align="center">
          <template slot-scope="scope">
            <span style="">{{ scope.row.categoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price" align="center">
          <template slot-scope="scope">
            <span style="">{{ scope.row.price }}￥</span>
          </template>
        </el-table-column>
        <el-table-column label="图片" prop="image" sortable align="center">
          <template slot-scope="scope">
            <div style="width: 100px;height: 50px;">
              <el-image :src="scope.row.image" lazy></el-image>
            </div>
            <!-- <span style="">{{ scope.row.image }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="信息" prop="description" align="center">
          <template slot-scope="scope">
            <span style="">{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" sortable align="center" width="190px">
          <template slot-scope="scope">
            <el-button type="info"
 size="mini" round @click="dishStatus(scope.row)" ref="status">{{ scope.row.status === 1 ? "起售" : "停售" }}</el-button>
            <!-- <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" active-text="起售" inactive-text="停售"
              active-color="#13ce66" inactive-color="#ff4949" @change="dishStatus" ref="status">
            </el-switch> -->
          </template>
        </el-table-column>
        <el-table-column align="center" width="150px" label="操作">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" @click="handleEdit(scope.$index, scope.row)"
              style="width: 40px;height: 25px;">Edit</el-button>
            <el-button size="medium" type="danger" @click="handleDelete(scope.$index, scope.row)"
              style="width: 40px;height: 25px;">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="userSearch">
      <el-table :data="[searchList]" v-loading="queryLoading" style="width: 100%;
    height: 76vh;" :default-sort="{ prop: 'date', order: 'descending' }" key="table1">

        <el-table-column label="ID" prop="id" key="id">
          <template slot-scope="scope">
            <span style="">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="菜品名字" prop="name" align="center">
          <template slot-scope="scope">
            <span style="">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="categoryId" sortable align="center">
          <template slot-scope="scope">
            <span style="">{{ scope.row.categoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price" align="center">
          <template slot-scope="scope">
            <span style="">{{ scope.row.price }}￥</span>
          </template>
        </el-table-column>
        <el-table-column label="图片" prop="image" sortable align="center">
          <template slot-scope="scope">
            <div style="width: 100px;height: 50px;">
              <el-image :src="scope.row.image" lazy></el-image>
            </div>
            <!-- <span style="">{{ scope.row.image }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="信息" prop="description" align="center">
          <template slot-scope="scope">
            <span style="">{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" sortable align="center" width="190px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="150px" label="操作">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" @click="handleEdit(scope.$index, scope.row)"
              style="width: 40px;height: 25px;">Edit</el-button>
            <el-button size="medium" type="danger" @click="handleDelete(scope.$index, scope.row)"
              style="width: 40px;height: 25px;">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <userEditView :dialogVisible.sync="dialogVisible" :dialogInfo.sync="dialogInfo"></userEditView>
    <userDeleteView :dialogVisible_delete.sync="dialogVisible_delete" :dialogInfo_delete.sync="dialogInfo_delete">
    </userDeleteView>
    <el-pagination :total="pagination.total" :current-page.sync="pagination.currentPage"
      :page-size.sync="pagination.PageSize" :page-sizes="[6]" layout="total, sizes, prev, pager, next, jumper"
      @size-change="query()" @current-change="query()" />
    <dishEditView :dialogVisible.sync="dialogVisible" :dialogInfo.sync="dialogInfo"></dishEditView>
    <dishDeleteView :dish_delete.sync="dish_delete" :dishInfo_delete.sync="dishInfo_delete"></dishDeleteView>
    <dishAddView :dish_add.sync="dish_add" :dishInfo_add.sync="dishInfo_add"></dishAddView>
  </div>
</template>
<script>
import { METHOD, request } from '@/utils/request'
import { Message } from 'element-ui'
import dishDeleteView from './dishDeleteView.vue'
import dishEditView from './dishEditView.vue'
import dishAddView from './dishAddView.vue'
// import Axios from 'axios'
export default {
  name: 'userDishView',
  components: {
    dishDeleteView,
    dishEditView,
    dishAddView
  },
  created () {
    this.query()
  },
  watch: {
    dialogInfo: {
      handler (newVal, oldVal) {
        const params = JSON.stringify(newVal)
        console.log(params)
        this.Editquery(params)
        // this.query()
      }
    }
  },
  // updated () {
  //   this.query()
  // },
  computed () {
    console.log(this.input)
  },
  mounted () {
  },
  data () {
    return {
      userAll: true,
      userSearch: false,
      list: {},
      searchList: {}, // 搜索后接受信息
      input: '',
      queryLoading: true, // 查询加载状态
      pagination: {
        // 分页数据
        total: 0, // 记录总数
        currentPage: 1, // 当前页
        PageSize: 6, // 每页的记录条数
        sort: 'updateAt,desc' // 查询排序依据
      },
      dialogVisible: false, // 是否显示edit页面
      dish_delete: false,
      dialogInfo: {}, // edit信息
      dishInfo_delete: {}, // delete信息
      dishID: '', // 输入菜品ID
      categoryId: '', // 输入分类ID
      checkBox: false, // 菜品批量删除复选框
      dish_add: false,
      dishInfo_add: {}

    }
  },
  methods: {
    change () {
      this.$forceUpdate()
    },
    query () {
      this.userAll = true
      this.queryLoading = true
      this.userSearch = false
      const params = Object.assign(
        {
          page: this.pagination.currentPage,
          pageSize: this.pagination.PageSize
        })
      request('/api/admin/dish/page', METHOD.POST, params).then((resp) => {
        this.list = resp.data.data.records
        this.pagination.total = resp.data.data.total
        this.currentPage = resp.data.data.currentPage
        this.pageSize = resp.data.data.pageSize
        this.queryLoading = false
        console.log(this.list)
      })
    },
    dishIDSearch () {
      // this.queryLoading = true
      this.userAll = false
      this.userSearch = true
      const params = this.dishID
      request('/api/admin/dish', METHOD.GET, params).then((resp) => {
        this.searchList = resp.data.data
        this.queryLoading = false
        console.log(this.searchList)
        if (this.searchList === null) {
          Message({
            message: '没有该菜品!',
            type: 'error',
            duration: 2 * 1000
          })
          this.userAll = true
          this.userSearch = false
        }
      })
    },
    Editquery (params) {
      this.queryLoading = true
      request('/api/admin/dish', METHOD.PUT, params).then((resp) => {
        if (resp === 200) {
          Message({
            message: '修改成功!',
            type: 'success',
            duration: 5 * 1000
          })
        }
      }).finally(() => { this.queryLoading = false })
      this.$nextTick(() => { this.query() })
    },
    Deletequery (id) {
      this.queryLoading = true
      request('/api/admin/dish/delete', METHOD.GET, id).then((resp) => {
        if (resp === 200) {
          Message({
            message: '删除成功!',
            type: 'success',
            duration: 5 * 1000
          })
        }
      }).finally(() => { this.queryLoading = false })
      this.$nextTick(() => { this.query() })
    },
    handleEdit (index, row) {
      this.dialogVisible = true
      this.dialogInfo = row
    },
    handleDelete (x, y) {
      this.dish_delete = true
      this.dishInfo_delete = y
    },
    dishStatus (x) {
      // this.queryLoading = true
      const params = x
      if (x.status === 1) {
        x.status = 0
      } else {
        x.status = 1
      }
      console.log(x)
      request('/api/admin/dish/status', METHOD.POST, params).then((resp) => {
        if (resp === 200) {
          Message({
            message: '修改成功!',
            type: 'success',
            duration: 5 * 1000
          })
        }
      }).finally(() => { this.queryLoading = false })
      this.$nextTick(() => { this.query() })
    },
    categoryIdAdd (params) {
      this.dish_add = true
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.el-pagination {
  margin-left: 25%;
  width: 200px;
  height: 50px;
}
</style>
